<template>
	<div id="app">
		<el-input  @input="inputCheck" id="input-box" type="text" v-model="totalNum"></el-input>
		<div id="calc-box">
			<span class="btn" @click="getNumber('1')">1</span>
			<span class="btn" @click="getNumber('2')">2</span>
			<span class="btn" @click="getNumber('3')">3</span>
			<span class="btn" @click="getNumber('4')">4</span>
			<span class="btn" @click="getNumber('5')">5</span>
			<span class="btn" @click="getNumber('6')">6</span>
			<span class="btn" @click="getNumber('7')">7</span>
			<span class="btn" @click="getNumber('8')">8</span>
			<span class="btn" @click="getNumber('9')">9</span>
			<span class="btn" @click="getNumber('0')">0</span>
			<span class="btn" @click="getNumber('.')">.</span>
			<span class="btn" @click="clearNum">清除</span>
			
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			keyBoardVisible: false,
			numArray:[],
			totalNum:'',
			panNum:'',
			title:''
		};
	},

	created() {},

	methods: {
		init(param){
			this.title = param
		},
		
		inputCheck(){
			if(isNaN(this.totalNum)){
				this.totalNum = ''
			}
		},
		
		//确认
		getInputNumber(){
			if(this.totalNum === ''){
				this.$message({
					message: '请输入数量',
					type: 'warning',
					duration: 1500
				});
			}else{
				
				this.keyBoardVisible = false
			}
			
		},
		
		getNumber(num){
			this.panNum += num.toString()
			if(num === '0' && this.panNum.length === 1){
				this.totalNum = ''
				this.panNum = ''
			}else{
				this.totalNum += num.toString()
				this.$emit("getEatNum",this.totalNum)
			}
		},
		//清除数据
		clearNum(){
			this.totalNum = ''
			this.panNum = ''
		},
	},
		
		
};
</script>

<style>
#app {
	width: 100%;
	padding: 0px 0px 0px;
	border-radius: 4px;
	margin: 0px auto;
	background: #ffffff;
	
	box-sizing: border-box;
}

#input-box {
	display: block;
	width: 100%;
	height: 46px;
	margin-bottom: 15px;
	border: none;
	border-radius: 6px;
	background:#ADD8E6;
	padding: 0 5px;
	text-align: right;
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 1px;
}

#calc-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#calc-box .btn {
	font-size: 20px;
	width: 30%;
	height: 40%;
	text-align: center;
	line-height: 40px;
	border-radius: 6px;
	cursor: pointer;
	background: 	#B0E0E6;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 12px;
	box-shadow: 0 2px rgba(0, 0, 0, 0.2);
}

#app .btn-double {
	width: 115px;
	background: #ffc690;
	box-shadow: 0 4px #ab7c50;
}

#app .clear {
	background: #ff94e6;
	box-shadow: 0 4px #d631af;
	color: #fff;
}

#app .operator {
	background: #FFB6C1;
	color: white;
}

#app .operator1 {
	background: #428ec8;
	color: white;
}

#app .back {
	background: #f1ff98;
	box-shadow: 0 4px #9da858;
}
</style>
